<template>
	<view :class="`skillCard ${props.disabled?'is-disabled':''}`" @click="clickJiNeng">
		<view class="shuxing">
			{{props.item.shuxing}}
		</view>
		<view class="right">
			<view class="name">
				{{props.item.name}}
			</view>
			<view class="weili">
				{{props.item.weili}}
			</view>
			<view class="PP">
				{{props.item.PP[0]+'/'+props.item.PP[1]}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		watch
	} from 'vue';
	const props = defineProps({
		item: {
			type: Object,
			default: {
				PP: [20, 20],
				weili: 30,
				shuxing: "普通",
				name: "冲撞",
				style: "攻击",
				describe: "全速撞击，对对手造成伤害"
			}
		},
		disabled:{
			type:Boolean,
			default:false
		}
	})
	const emit = defineEmits(["clickJiNeng"])
	
	onMounted(() => {
	})
	const clickJiNeng = ()=>{
		if(!props.disabled){
			emit("clickJiNeng",props.item)
		}
	}
</script>

<style scoped>
	.skillCard {
		width: calc(100% - 5rpx);
		height: calc(100% - 50rpx);
		border: 2px ridge #3a6eff;
		background: #75bfff85;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 50rpx 5rpx;
		display: flex;
		position: relative;
	}
	.shuxing{
		width: 30rpx;
	}
	.right{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.is-disabled::before{
		/* 全部置灰 */
		content: "";
		display: block;
		height: calc(100% + 4px);
		width: calc(100% + 4px);
		position: absolute;
		top: -2px;
		right: -2px;
		background: #ccc8;
		z-index: 2;
	}
</style>